<template>
  <div class="data-update">
    <div class="content-container">
      <div class="naviga"><span>新产品上市计划&nbsp;> </span><span class="setColor">活动数据上报</span></div>
      <div class="mainPage">
        <div class="channelTab titleFont">
          <!--<el-tabs type="border-card">-->
          <!--<el-tab-pane label="试销活动">-->
          <div style="">
            <div class="titleHeader">试销活动</div>
            <div class="channel-detail-select space-between"
                 style="background: #ffffff;padding-left: 10px;padding-top: 10px">
              <el-form :inline="true"
                       class="demo-form-inline single-form-inline  pickerOption"
                       size="mini"
                       v-if="selectFlag">
                <el-form-item label="品类">
                  <el-select class="selectFont"
                             v-model="cateG"
                             placeholder="选择品类"
                             @change="select">
                    <el-option class="selectFont"
                               v-for="(item,index) in categoryLists"
                               :key="index"
                               :label="item.categoryName"
                               :value="item.categoryName"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="型号">
                  <el-select class="selectFont"
                             v-model="code"
                             placeholder="选择型号"
                             @change="select">
                    <el-option class="selectFont"
                               v-for="(item,index) in codeList"
                               :key="index"
                               :label="item"
                               :value="item"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="状态">
                  <el-select class="selectFont"
                             v-model="status"
                             placeholder="选择状态"
                             @change="select">
                    <el-option class="selectFont"
                               label="全部"
                               value='全部'></el-option>
                    <el-option class="selectFont"
                               label="正在试销 "
                               value='0'></el-option>
                    <el-option class="selectFont"
                               label="已完成  未做总结"
                               value='1'
                               style="color:red;"></el-option>
                    <el-option class="selectFont"
                               label="已完成  已做总结"
                               value='2'></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
              <el-form :inline="true"
                       class="demo-form-inline single-form-inline  pickerOption"
                       size="mini"
                       v-if="!selectFlag">
                <el-form-item label="型号">
                  <el-input style="width: 350px"
                            v-model="inputName"
                            placeholder="请输入产品型号"
                            size="small"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button style="font-weight: bold"
                             size="small"
                             type="primary"
                             @click="codeSelect">查询</el-button>
                </el-form-item>
              </el-form>
              <div class="toggle-select"
                   @click="toggleSelect"><span v-if="selectFlag">精确查找</span><span v-else>组合条件查找</span></div>
            </div>
            <div style="margin: 0 10px;padding: 0 10px;background: #ffffff">
              <div class="tableContainer">
                <el-table :data="productStatus.list"
                          style="width: 100%"
                          size="mini">
                  <el-table-column type="index"
                                   width="80px"
                                   label="序号">
                  </el-table-column>
                  <el-table-column prop="productCode"
                                   label="产品型号">
                  </el-table-column>
                  <el-table-column prop="planSales"
                                   label="试销目标量(件)">
                  </el-table-column>
                  <el-table-column prop="number"
                                   label="试销点数量(个)">
                  </el-table-column>
                  <el-table-column prop="countFinishRatioString"
                                   sortable
                                   label="完成度">
                  </el-table-column>
                  <el-table-column label="状态">
                    <template slot-scope="scope">
                      <!-- <div :style="{'color': (scope.row.status | colorFilter)}">{{scope.row.statu}}</div> -->
                      <div :style="{'color':colorArray[scope.row.status]}">{{scope.row.statu}}</div>

                    </template>
                  </el-table-column>
                  <el-table-column label="
                           操作">
                    <template slot-scope="scope">
                      <div class="opreator"
                           @click="testSales(scope.row.productId)">试销明细</div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div class="paginationSet">
                <div class="pagination-container">
                  <div class="toStart"
                       @click="setCurrentPage">首页</div>
                  <el-pagination background
                                 layout="prev, pager, next"
                                 @current-change="select"
                                 :current-page.sync="currentPage"
                                 :total="productStatus.totalRecord">
                  </el-pagination>
                </div>
              </div>
            </div>
          </div>

          <!--</el-tab-pane>-->
          <!--</el-tabs>-->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as opreate from 'api/getData'

export default {
  name: "data-update",
  data () {
    return {
      selectFlag: true,
      categoryLists: [{ categoryName: '全部' }],
      codeList: ['全部'],
      statusLists: [],
      inputName: '',
      cateG: '全部',
      code: '全部',
      status: '全部',
      productStatus: [],
      currentPage: 1,
      colorArray: ['red', 'green', 'blue'],
    }
  },
  //   filters: {
  //     colorFilter (status) {
  //       console.log(status)
  //       return colorArray[status]
  //     }
  //   },

  mounted () {
    console.log(this.colorState)
    this.getData(this.cateG, this.code, this.status)
    this.getCate()
    this.getCode()
  },

  methods: {
    testSales (code) {
      this.$router.push({ name: 'testSales', params: { code: code } })
    },
    getCate () {
      opreate.allCategoryTest().then(res => {
        this.categoryLists = [
          ...this.categoryLists,
          ...res.data
        ]
      })
    },
    getCode () {
      let param = {
        categoryName: this.cateG == '全部' ? undefined : this.cateG
      }
      opreate.procodeByCate(param).then(res => {
        this.codeList = [
          '全部',
          ...res.data
        ]
      })
    },
    codeSelect () {
      this.code = this.inputName
      this.status = '全部'
      this.cateG = '全部'
      this.setCurrentPage()
    },
    toggleSelect () {
      this.selectFlag = !this.selectFlag
    },
    setCurrentPage () {
      this.currentPage = 1
      this.getData(this.cateG, this.code, this.status)
    },
    getData (cateG, code, status) {
      let param = {
        "categoryName": cateG == '全部' ? undefined : cateG,
        "status": status == '全部' ? undefined : status,
        "productCode": code == '全部' ? undefined : code,
        "pageNumber": this.currentPage
      }
      opreate.dataUpdate(param).then(res => {
        this.productStatus = res.data

      })
    },
    select () {
      this.getCode()
      this.getData(this.cateG, this.code, this.status)
    }
  }
}
</script>

<style scoped>
.channel-detail-select {
  display: flex;
  margin: 0 10px;
  margin-top: 10px;
}
.channel-detail-select .toggle-select {
  color: #409eff;
  line-height: 40px;
  cursor: pointer;
}
.titleHeader {
  font-weight: bold;
}
</style>
